<template>
  <div>{{ count }}</div>
  <div>{{ x }}</div>
  <a-button type="primary" @click="getStore">获取</a-button>
  <a-button type="primary" @click="submit">提交</a-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { useStore } from '@/pinia';
import { storeToRefs } from 'pinia';

const count = ref(0);
const store = useStore();
const x = ref(0);
const getStore = () => {
  const { counter, changeNum } = storeToRefs(store);
  count.value = counter.value; // 响应式直接修改
  x.value = changeNum.value;
  store.$patch(state => {
    state.counter++;
  });
  // 重置 store.$reset();
};
const submit = () => {
  store.upNum(100);
};
</script>

<style scoped></style>
